<template>
  <div class='flex gap-3'>
    <div class='flex-1'>
      <div class='flex flex-col gap-3'>
        <div class='p-3 bg-white rounded'>
          <el-tabs v-model='activeName'>
            <el-tab-pane
              v-for='item in panelList'
              :label='item.name'
              :key='item.name'
              :name='item.id'
            >
              <MessageList
                :list='taskList!'
                :pagination='taskPagination'
                @refresh='handleRefresh'
              ></MessageList>

            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class='w-80 flex flex-col gap-3'>
      <GoLogin/>
      <HotArticle/>
    </div>
  </div>
</template>


<script setup lang='ts'>
import {TaskEntity} from '@/composables/api/task'
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import MyTextarea from '@/components/MyTextarea/index.vue'
import {ElMessage} from 'element-plus'
import {useUserStore} from '@/stores/user'
import {useWsLoginStore} from '@/stores/ws'

const router = useRouter()
const userStore = useUserStore()
const loginStore = useWsLoginStore()

const userId = computed(() => userStore.userInfo?.uid || '1000000')

// const activeMenu = inject('activeMenu', ref('-1'))


const list = ref<{ name: string; id: number; isActive?: boolean; path?: string, needLogin?: boolean }[]>([
  {
    name: '随便聊',
    id: -1,
    isActive: true,
  },
  {
    name: '发任务',
    id: -2,
    isActive: false,
    path: '/main/task/handle',
    needLogin: true,
  },
  {
    name: '找任务',
    id: 1,
    path: `/main/typePostList/1`,
    isActive: false,
  },
  {
    name: '找帮忙',
    id: 2,
    path: '/main/typePostList/2',
    isActive: false,
  },
])

const clickHandle = (item: any) => {
  list.value.forEach((item: any) => {
    item.isActive = false
  })
  item.isActive = true
  if (item.path) {
    router.push(item.path)
  }
}
const panelList = ref([
  {
    name: '评论回复',
    id: 3,
    needLogin: true,
  },
  {
    name: '关注通知',
    id: 8,
  },
  {
    name: '赞和收藏',
    id: 9,
  },
])


const activeName = ref(3)

const taskList = ref<TaskEntity[]>()

const taskPagination = ref<any>({
  pageSize: 10,
  pageNum: 1,
  total: 0,
})

// 监听标签切换
watch(activeName, async (newVal) => {
  taskList.value = undefined;
  // 当tab切换，分页的num重置成1
  taskPagination.value.pageNum = 1;
  const queryData = {
    type: newVal > 0 ? newVal : undefined,
    receiveUserId: localStorage.getItem('userId'),
    noticeType: 0,
    messageType: 0,
  }
  // 没登录先登录
  if (!userStore.isSign) {
    loginStore.showLogin = true
    return
  }
  // 只有自己tab传userId
  if (newVal === 3) {
    queryData.messageType = 0
    await getTaskList(queryData)
  } else if (newVal === 8) {
    queryData.messageType = 1
    await getTaskList(queryData)
  }

})

const getTaskList = async (params?: object) => {
  const queryData = {
    ...params,
    pageSize: taskPagination.value.pageSize,
    pageNum: taskPagination.value.pageNum,
  }
  const data = (await service.task.messageList(queryData)) || {}
  taskList.value = data.list
  taskPagination.value.total = data.total

}

onMounted(async () => {
  const queryData = {
    receiveUserId: localStorage.getItem('userId'),
    noticeType: 0,
    messageType: 0,
  }
  await getTaskList(queryData)
})

const handleRefresh = (pagination?: any) => {
  if (pagination) {
    taskPagination.value.pageSize = pagination.pageSize
    taskPagination.value.pageNum = pagination.pageNum
  }
  // 点击页码的时候传当前type和userId
  const queryData = {
    type: activeName.value > 0 ? activeName.value : undefined,
    userId: userId.value > 0 ? userId.value : undefined,
  }
  getTaskList(queryData)
}

const ordinaryPost = ref({
  content: '',
  images: [],
})

const location = localStorage.getItem('location') ? JSON.parse(localStorage.getItem('location') as string) : {
  longitude: -1,
  latitude: -1,
}

</script>

